<!-- informationHeader.vue -->
<template>
  <view class="nav">
    <!-- 筛选栏 -->
    <view class="nav-select">
      <!-- 上侧筛选栏 -->
      <view class="select-left">
        <view 
          class="left-item" 
          v-for="lefter in lefts" 
          :key="lefter.menu_id"
          :class="{ active: currentLeft === lefter.menu_id }"
          @click="handleNavClick(lefter)"
        >
          {{ lefter.label }}
        </view>
      </view>
    </view>

    <!-- 下侧筛选栏 -->
    <view class="select-bottom">
      <view class="select-right">
        <view 
          class="right-item" 
          v-for="righter in rights" 
          :key="righter"
          :class="{ active: currentRight.startsWith(righter) }"
          @click="toggleDropdown(righter)"
        >
          {{ currentRight.startsWith(righter) ? currentRight : righter }}
          <image src="/static/information/dropdown.png" class="dropdown-icon"></image>
          
          <!-- 下拉菜单 -->
          <view 
            v-if="showDropdown && selectedRight === righter" 
            class="dropdown-list"
            @click.stop
          >
            <view class="dropdown-list-title">
              {{ righter === '资源类型' ? '请选择类型' : '请选择地区' }}
            </view>
			<view class="custom-input">
				<input
				class="input-content"
				placeholder="请选择对应省市区"
				/>
				<image
				class="arrow-up"
				src="/static/information/up.png"
				mode="aspectFit"
				></image>
			</view>
			
            <view 
              v-for="option in dropdownOptions[righter === '资源类型' ? 'Type' : 'Area']" 
              :key="option.id"
              @click.stop="selectOption(option, righter)"
            >
              <view v-if="righter === '资源类型'">
                {{ option.label }}
              </view>
              <view class="place" v-else >
                <view class="provice-item">
				<text>{{ option.province }}</text>
				
				<image src="/static/information/right.png" class="right-arrow"></image>
				</view>
               <view class="provice-item">
			   {{ option.city }}
			   <image src="/static/information/right.png" class="right-arrow"></image>
			   </view>
                <view class="provice-item">
				{{ option.district }}
				<image src="/static/information/right.png" class="right-arrow"></image>
				</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'

const lefts = ref([
  { label: '最新资讯', page: '/pages/index/information/information', menu_name: 'latest_news', menu_id: 1 },
  { label: '资源展示', page: '/pages/index/information/informationShow', menu_name: 'source_show', menu_id: 2 },
  { label: '资源需求', page: '/pages/index/information/informationNeed', menu_name: 'source_need', menu_id: 3 },
])

const rights = ['资源类型', '全国地区']
const currentLeft = ref(1) // 默认值会被onMounted覆盖
const currentRight = ref('资源类型')

// 恢复页面加载时的激活状态判断
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1].route // 获取当前页面路由（注意这里可能需要根据框架调整）
  const activeNav = lefts.value.find(item => item.page === `/${currentPage}`) // 假设页面路径需要带根路径
  if (activeNav) {
    currentLeft.value = activeNav.menu_id
  }
})

const handleNavClick = (lefter) => {
  // 如果已经是当前页面则不跳转
  if (currentLeft.value === lefter.menu_id) return
  
  currentLeft.value = lefter.menu_id
  // 改用navigateTo保留页面堆栈，允许返回
  uni.redirectTo({
  	url:lefter.page
  })
}

// 以下保持原有代码不变
const showDropdown = ref(false)
const selectedRight = ref(null)

const dropdownOptions = reactive({
  Type: [
    { id: 1, label: '科普基地' },
    { id: 2, label: '科研机构' },
    { id: 3, label: '实验室' }
  ],
  Area: [
    { id: 1, province: '广东省', city: '广州市', district: '天河区' },
    { id: 2, province: '江苏省', city: '南京市', district: '鼓楼区' },
    { id: 3, province: '浙江省', city: '杭州市', district: '西湖区' }
  ]
})

const toggleDropdown = (righter) => {
  if (selectedRight.value === righter) {
    showDropdown.value = !showDropdown.value
  } else {
    selectedRight.value = righter
    showDropdown.value = true
  }
  
  if (!currentRight.value.startsWith(righter)) {
    currentRight.value = righter
  }
}

// const selectOption = (option, righter) => {
//   const prefix = righter === '资源类型' ? '类型' : '区域'
//   const value = option.label 
//     ? `${prefix}: ${option.label}` 
//     : `${prefix}: ${option.province} ${option.city} ${option.district}`
  
//   currentRight.value = value
//   showDropdown.value = false
// }
</script>

<style lang="scss">

.nav {
  .nav-select {
    display: flex;
    height: 70rpx;
    background: #f8f8f8;
    border-bottom: 1rpx solid #eee;

    .select-left {
      width: 100%;
      display: flex;
      background: #fff;
      
      .left-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200rpx;
        font-size: 28rpx;
        color: #333;
        position: relative;

        &.active {
          color: #fa6401;
          font-weight: bold;
          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 4rpx;
            background: #fa6401;
          }
        }
      }
    }
  }

  .select-bottom {
    .select-right {
      display: flex;
      background: #f7f7f9;
      padding: 18rpx 28rpx;
      
      .right-item {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        width: 164rpx;
        height: 60rpx;
        margin-right: 12rpx;
        font-size: 24rpx;
        color: #333;
        position: relative;

        .dropdown-icon {
          width: 14rpx;
          height: 9.2rpx;
          margin-left: 10rpx;
        }

        .dropdown-list {
          position: fixed;
          bottom: 0rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          height: 848rpx;
          overflow-y: auto;
          background: #fff;
          border: 1rpx solid #eee;
          border-radius: 40rpx 40rpx 0 0;
          box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
          z-index: 1000;
          overflow: hidden;

          .dropdown-list-title {
            height: 70rpx;
            width: 100%;
            border-radius: 10rpx 10rpx 0rpx 0rpx;
            color: #000;
            font-size: 36rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1rpx solid #eee;
          }
		  
		  .custom-input {
		    position: relative;
		    display: flex;
		    align-items: center;
			width: 90%;
			height: 64rpx;
		    border: 1rpx solid #0052d9;
		    border-radius: 10rpx;
		    padding: 10rpx;
		    margin: 26rpx;
			.input-content{
				flex: 1;
				padding:0 10rpx;
				font-size: 24rpx;
				box-sizing: border-box; // 防止padding溢出
			}
			.arrow-up{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				right: 20rpx;
				z-index: 1; // 确保在输入框上方
			}
			
		  }
		  

          view {
            // padding-top: 20rpx;
            font-size: 26rpx;
            color: #666;
            

            &:last-child {
              border-bottom: none;
            }

            &:active {
              background-color: #f8f8f8;
            }
          }
		  .place{
			  display: flex;
			  justify-content: space-around;
			  margin: 0 25rpx;
			  view{
				  display: flex;
				   flex: 1;
				   height: 80rpx;
				   padding-left: 10rpx;
				   align-items: center;
				   
				   border-right:2rpx solid #eee;
				   
			  }
			  .provice-item{
				  display: flex;
				  justify-content: space-between;
				  image{
					  width: 32rpx;
					  height: 32rpx;
					  margin-right: 20rpx;
				  }
			  }
			 
		  }
        }
      }
    }
  }
}
</style>    